{% extends "index.html" %}
{% block content %}

						
							<div class="row">
									<div class="col-xs-12">
																			
										<div class="pull-right">				
											<select class="chosen-select"  data-placeholder="选择Task类型" id="task-select"  onchange="javascript:oBtTaskTypeSelect();">
												<option value="">选择Task类型</option>
												{% for ds in taskList %}
													<option value="{{ds.id}}">{{ds.name}}</option>
												{% endfor %}															
											</select>
										</div>
										
										<h3 class="header smaller lighter blue">
											<i class="icon-rss icon-animated-hand-pointer blue"></i>
											任务运行日志列表
										</h3>
										
											
																										
										<div class="table-header">
											当前最近300条任务日志
										</div>
										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th class="col-sm-3">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
															任务ID
														</th>
														<th>任务名</th>
														<th>任务参数</th>
														<th class="hidden-480">任务时间</th>

														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															花费时间(sec)
														</th>

														<th class="hidden-480">任务状态</th>

														<th class="center">操作</th>
													</tr>
												</thead>

												<tbody>
												{% for ds in taskLog %}
													<tr>
														<td >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
																<a href="#">
																	{{ ds.task_id }}
																</a>
															</label>														
															
														</td>

														<td>
															{{ ds.name }}
														</td>
														<td class="col-xs-1">
															{{ ds.args }}
																														
														</td>
														<td class="hidden-480">
															{{ ds.tstamp|date:"Y/m/d H:i:s" }}	
																												
														</td>
														<td>
															{{ ds.runtime }}
															
														</td>
														<td class="hidden-480">
															{% if ds.state == 'SUCCESS' %}
																<span class="label label-success arrowed">
																	成功
																</span>
															{% elif ds.state == 'FAILURE' %}
																<span class="label label-danger arrowed">
																	失败
																</span>	
															{% elif ds.state == 'STARTED' %}
																<span class="label label-info arrowed">
																	开始
																</span>	
															{% elif ds.state == 'REVOKED' %}
																<span class="label label-inverse arrowed">
																	取消
																</span>	
															{% elif ds.state == 'RECEIVED' %}
																<span class="label label-purple arrowed">
																	接收
																</span>	
															{% elif ds.state == 'PENDING' %}
																<span class="label label-warning arrowed">
																	等待
																</span>	
															{% elif ds.state == 'RETRY' %}
																<span class="label label-yellow  arrowed">
																	重试
																</span>	
															{% else %}
																<span class="label label-pink arrowed-in">
																	未知
																</span>												
															{% endif %}															
															
														</td>

														<td class="center">
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																<a class="black" data-toggle="modal" data-target="#myViewLogModal" href="javascript:" onclick="onBtnViewTaskLog(this,{{ ds.id }},'{{ds.task_id}}','view')">
																	<i class="icon-zoom-in  bigger-120"></i>
																</a>																	 																																																		
																<a class="red" href="javascript:" onclick="onBtnHandleTaskLog(this,{{ ds.id }},'{{ds.task_id}}','delete')">
																	<i class="icon-trash  bigger-120"></i>
																</a>
																
																																																				
															</div>																			
														</td>

													</tr>
												{% endfor %}
												</tbody>
											</table>
										</div>
									</div>
								</div>	

						</div>
						
			
			
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myViewLogModal" tabindex="-1" role="dialog" aria-labelledby="myViewLogModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:800px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myViewLogModalLabel">
								任务详细信息
							</h4>
						</div>
						<div class="modal-body">
							<div id="viewLog" class="row">
							
														
							
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>							
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			
		
		<!-- page specific plugin scripts -->

		<script src="/static/js/jquery.dataTables.min.js"></script>
		<script src="/static/js/jquery.dataTables.bootstrap.js"></script>
		<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2').dataTable( {
			"aoColumns": [
		      { "bSortable": false },
		      null, null,null, null, null,
			  { "bSortable": false }
			] } );
			
			
			$('table th input:checkbox').on('click' , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
					
			});
			
			
				
			$(".chosen-select").chosen(); 
			$('#chosen-multiple-style').on('click', function(e){
					var target = $(e.target).find('input[type=radio]');
					var which = parseInt(target.val());
					if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
					 else $('#form-field-select-4').removeClass('tag-input-style');
			});
		
			$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();
		
				var off2 = $source.offset();
				var w2 = $source.width();
		
				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
				return 'left';
			}
		});

		
		function oBtTaskTypeSelect() {
			   var obj = document.getElementById("task-select"); 
			   var index = obj.selectedIndex;
			   var value = obj.options[index].value;
			   if ( value.length >0 ) {
				   window.location.href='/viewTask/?taskid='+ value;
			   }
			   
		}
		
		function onBtnViewTaskLog(obj, id,task_id,op){
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			$.ajax({
				dataType: "JSON",
				url:'/viewTask/', //请求地址
				type:"POST",  //提交类似
				data:{
					"id":id,
					"op":op,
					"task_id":task_id
				},
				success:function(response){
					btnObj.removeAttr('disabled');
					if (response["code"] == 200){
						var viewHmtl = '<div class="col-xs-12 col-sm-9">' +
											'<h4 class="blue">' +
											'<span class="middle">任务名称</span>' +					
											'<span class="label label-purple arrowed-in-right">' +
												'<i class="icon-circle smaller-80 align-middle"></i>' +
												response['data']['name'] +
											'</span>' +
										'</h4>' +
					
										'<div class="profile-user-info">' +
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 任务Id </div>' +
					
												'<div class="profile-info-value">' +
													'<span>'+ response['data']['task_id'] +'</span>' +
												'</div>' +
											'</div>' +
					
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 任务状态 </div>' +
					
												'<div class="profile-info-value">' +
													'<i class="icon-map-marker light-orange bigger-110"></i>' +
													'<span>'+ response['data']['state'] +'</span>' +													
												'</div>' +
											'</div>' +
					
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 任务参数 </div>' +
					
												'<div class="profile-info-value">' +
												'<span>'+ response['data']['args'] +'</span>' +
												'</div>' +
											'</div>' +
					
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 任务结果 </div>' +
					
												'<div class="profile-info-value">' +
												'<span>'+ response['data']['result'] +'</span>' +
												'</div>' +
											'</div>' +
					
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 执行时间 </div>' +
					
												'<div class="profile-info-value">' +
												'<span>'+ response['data']['tstamp'] +'</span>' +
												'</div>' +
											'</div>' +
											
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 花费时间 </div>' +
					
												'<div class="profile-info-value">' +
												'<span>'+ response['data']['runtime'] +'</span>' +
												'</div>' +
											'</div>' +
										'</div>' +
					
										'<div class="hr hr-8 dotted"></div>' +
					
										'<div class="profile-user-info">' +
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 其他参数 </div>' +
					
												'<div class="profile-info-value">' +
													'<a href="#" target="_blank">'+ response['data']['kwargs'] +'</a>' +
												'</div>' +
											'</div>' +
					
											'<div class="profile-info-row">' +
												'<div class="profile-info-name"> 运行节点 </div>' +
					
												'<div class="profile-info-value">' +
													'<a href="#" target="_blank">'+ response['data']['worker'] +'</a>' +
												'</div>' +
											'</div>' +
					
										'</div>' +
									'</div>' 
						document.getElementById('viewLog').innerHTML = viewHmtl;
						
					}
					else {
						var viewHmtl = response['msg'];
						document.getElementById('viewLog').innerHTML = viewHmtl;
					}
					
				},
		    	error:function(response){
		    		btnObj.removeAttr('disabled');

		    	}
			})
	}
		
		function onBtnHandleTaskLog(obj, id,task_id,op){
			var btnObj = $(obj);
			btnObj.attr('disabled',true);
			$.ajax({
				dataType: "JSON",
				url:'/viewTask/', //请求地址
				type:"POST",  //提交类似
				data:{
					"id":id,
					"op":op,
					"task_id":task_id
				},
				success:function(response){
					btnObj.removeAttr('disabled');
					if (response["code"] == 200){
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
					}
					else {
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					}
					
				},
		    	error:function(response){
		    		btnObj.removeAttr('disabled');
		    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
		    	}
			})
	}
		
		</script>
{% endblock %}